<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="keywords"
      content="HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,webpack,node.js,git,npm,前端,全栈,Web开发"
    />
    <meta
      name="description"
      content="一位Web开发工程师的学习、工作笔记-星之痕。
    内容涵盖：HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,前端,全栈,Web开发……等"
    />
    <title>Vue.js 笔记-星之痕</title>
    <link rel="stylesheet" href="./css/global.css" />
  </head>

  <body>
    <div id="app">
      <div>
        <h2>{{title}}</h2>
        <ul>
          <li v-for="msg in messages">{{msg}}</li>
        </ul>
      </div>
      <button v-on:click="action">点击</button>
      <h2>data: {{list}}</h2> |
      <h2>computed: {{sList}}</h2>
      <h2>location.href:{{href}}</h2>
      <h2>location.hash:{{hash}}</h2>
    </div>

    <script src="js/vue.js"></script>
    <script>
      Vue.config.productionTip = false; //阻止vue页面在启动时的生产提示

      const app = new Vue({
        el: "#app",
        data: {
          title: "this is a title",
          messages: ["this is a vue demo!"],
          list: ["2", "b", "3", "a"],
          href:window.location.href,
          hash:window.location.hash
        },
        computed: {
          sList: {
            get: () => {
              return this.list;
            },
            set: () => {
              // this.list.length=0;
              this.list.push('s')
            },
          },
        },
        methods: {
          action() {
            this.title = "hello!";
          },
        },
      });

      // Vue实例上的$methods,以及Prototype上$methods 是Vue内部封装好的，可供开发人员调用的方法
      console.log(app);
    </script>
  </body>
</html>
